<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="../src/three.js"></script>
    <script src="../src/OrbitControls.js"></script>
    <script src="../src/objects/Refractor.js"></script>
    <script src="../src/shaders/WaterRefractionShader.js"></script>
</head>
<body>
    
</body>
<script type="x-shader/x-vertex" id="vertexShader"></script>
<script type="x-shader/x-vertex" id="fragmentShader"></script>
<script>
    var scene, camera, renderer, clock, controlller
    var refractorGeometry, refractor
    // var shadermaterial
    init()
    animate()

    // - Functions -
    function init(){
        scene = new THREE.Scene()
        var r = "../src/textures/"
        var urls = [
					r + "px.jpg", r + "nx.jpg",
					r + "py.jpg", r + "ny.jpg",
					r + "pz.jpg", r + "nz.jpg"
				];
        var textureCube = new THREE.CubeTextureLoader().load( urls )
        textureCube.mapping = THREE.CubeRefractionMapping
        scene.background = textureCube
        clock = new THREE.Clock();
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.z = 20
        renderer = new THREE.WebGLRenderer({
            antialias:true, // 开启抗锯齿处理
            alpha:true
        })
        renderer.setClearColor(new THREE.Color(0x000000))
        renderer.setSize(window.innerWidth,window.innerHeight)
        // renderer.shadowMap.enabled = true

        // refractorGeometry = new THREE.PlaneBufferGeometry(5, 5)
        refractorGeometry = new THREE.BoxBufferGeometry(5, 5, 5)
        refractor = new THREE.Refractor(refractorGeometry, {
            color: 0x999999,
            textureWidth: 1024,
            textureHeight: 1024,
            shader: THREE.WaterRefractionShader
        });
        refractor.position.set(0, 0, 5)
        scene.add(refractor)

        // shadermaterial = new THREE.ShaderMaterial( {
        //     uniforms: {
        //         tExplosion: {   // 网格着色器使用的纹理贴图
        //             type: "t",
        //             value: texture
        //         },
        //         time: {         // 网格顶点变换的间隔时间
        //             type: "f",
        //             value: 0.0
        //         }
        //     },
        //     vertexShader: document.getElementById( 'vertexShader' ).textContent,
        //     fragmentShader: document.getElementById( 'fragmentShader' ).textContent
        // } );

        var axisHelper = new THREE.AxesHelper( 10 )
        scene.add( axisHelper )

        /**
            * 光源设置
            */
        // 方向光1
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
        directionalLight.position.set(400, 200, 300);
        // directionalLight.castShadow = true
        scene.add(directionalLight);
        // 方向光2
        var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.9);
        directionalLight2.position.set(-400, -200, -300);
        scene.add(directionalLight2);
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambient);

        controlller = new THREE.OrbitControls(camera,renderer.domElement)
        document.body.appendChild(renderer.domElement)
        window.onresize = onResize
    }

    function animate(){
        requestAnimationFrame(animate)
        renderer.render(scene, camera)
        controlller.update(clock.getDelta())
    }

    function onResize() {
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()
        renderer.setSize(window.innerWidth, window.innerHeight)
    }
</script>
</html>